<template>
    <view class="container">
        <view class="title">移动党校会议纪要</view>
        <view class="desc">
            说明：下栏中您的签名将保留到会议纪要中，感谢您的参与！
        </view>
        <view class="tip">请在虚线框内签名，完毕后点击“保存”。</view>
        <view class="canvas-section">
            <canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
        </view>
        <view class="footer">
            <view class="left" @click="clear">重写</view>
            <view class="right" @click="finish">保存签名</view>
        </view>
    </view>
</template>

<script>
    var x = 20;
    var y =20;
    export default{
        data(){
            return {
                ctx:'',         //绘图图像
                points:[]       ,//路径点集合
				type:''
            }
        },
        onLoad(option) {
			this.type=option.type
            this.ctx = uni.createCanvasContext("mycanvas",this);   //创建绘图对象

            //设置画笔样式
            this.ctx.lineWidth = 4;
            this.ctx.lineCap = "round"
            this.ctx.lineJoin = "round"
        },
        methods:{

            //不写小程序控制台会出现个错误，但是也不影响使用
            toJSON () {},

            //触摸开始，获取到起点
            touchstart:function(e){
                let startX = e.changedTouches[0].x;
                let startY = e.changedTouches[0].y;
                let startPoint = {X:startX,Y:startY};
                this.points.push(startPoint);
                //每次触摸开始，开启新的路径
                this.ctx.beginPath();
            },

            //触摸移动，获取到路径点
            touchmove:function(e){
                let moveX = e.changedTouches[0].x;
                let moveY = e.changedTouches[0].y;
                let movePoint = {X:moveX,Y:moveY};
                this.points.push(movePoint);       //存点
                let len = this.points.length;
                if(len>=2){
                    this.draw();                   //绘制路径
                }

            },

            // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
            touchend:function(){
                this.points=[];
            },

            /* ***********************************************
            #   绘制笔迹
            #	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
            #	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
            #	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
            ************************************************ */
            draw: function() {
                let point1 = this.points[0]
                let point2 = this.points[1]
                this.points.shift()
                this.ctx.moveTo(point1.X, point1.Y)
                this.ctx.lineTo(point2.X, point2.Y)
                this.ctx.stroke()
                this.ctx.draw(true)
            },

            //清空画布
            clear:function(){
                let that = this;
                uni.getSystemInfo({
                    success: function(res) {
                        let canvasw = res.windowWidth;
                        let canvash = res.windowHeight;
                        that.ctx.clearRect(0, 0, canvasw, canvash);
                        that.ctx.draw(true);
                    },
                })
            },

            //完成绘画并保存到本地
            async finish(){
                let _this = this;
                uni.canvasToTempFilePath({
                    canvasId: 'mycanvas',
                    success: function(res) {
                        wx.getFileSystemManager().readFile({
                            filePath: res.tempFilePath,  //图片路径
                            encoding: 'base64', //编码格式
                            success: res => { //成功的回调
                                _this.uploadBase64Img('data:image/png;base64,' + res.data);
                            }
                        })
                    }
                })
            },

            async uploadBase64Img(base64Img){
                let params = {
                    base_code:base64Img,
                }
                let res = await this.$api.uploadBase64Image(params);
                if(res.data.level == "success"){
					if(this.type=='emcee'){
						uni.setStorageSync('emcee_base64_img_id',res.data.data.id);
						uni.setStorageSync('emcee_base64_img_url',res.data.data.img_url);
						uni.navigateBack({
							delete:1
						})
					}else{
						uni.setStorageSync('base64_img_id',res.data.data.id);
						uni.setStorageSync('base64_img_url',res.data.data.img_url);
						uni.navigateTo({
						    url:"/pages/setRealname/setRealname"
						})
					}
                   
                }else{
                    uni.showToast({
                        title: res.data.message,
                        icon: 'none',
                        duration: 1000
                    })
                }
            }
        },
    }
</script>

<style scoped lang="scss">

    .container{
        background-color: #c1441e;
        min-height: 100vh;
        padding: 0 10px;
        color: #ffffff;
        .title{
            text-align: center;
            padding: 20px 0;
            font-weight: bold;
        }
        .desc{
            font-size: 13px;
        }
        .tip{
            font-size: 12px;
            padding: 10px 0;
            margin-top: 20px;
        }
        .canvas-section{
            padding: 8px;
            background-color: #ffffff;
        }
    }

    .title{
        height:50upx;
        line-height: 50upx;
        font-size: 16px;
    }
    .mycanvas{
        width: 100%;
        height: 200px;
        background-color: #ECECEC;
        border: 1px dotted #3eaed2
    }
    .footer{
        font-size: 16px;
        height: 150upx;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .left,.right{
        line-height: 100upx;
        height: 100upx;
        width: 250upx;
        text-align: center;
        font-weight: bold;
        color: white;
        border-radius: 5upx;
    }
    .left{
        background: orange;
    }
    .right{
        background:#007AFF;
    }
</style>

